<template>
    <div>
        <section class="animation_opactiy shop_back_svg_container" v-if="showLoading">
           <img :src="shopLoadingImg">
        </section>
        <section v-else class="shop_container">
            <nav class="nav_header">
                <svg class="back_svg" @click="$router.go(-1)" xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(255,255,255);stroke-width:3"/>
                </svg>
                <span>{{shopDetailData.name}}</span>
            </nav>
            <header class="shop_detail_header">
                <div class="header_cover_img_con">
                    <img class="header_cover_img" :src="imgBasePath+shopDetailData.image_path" alt="">
                </div>
                <section class="description_header">
                    <router-link class="description_top" to="/shop/shopDetail">
                        <section class="description_left">
                            <img :src="imgBasePath+shopDetailData.image_path" alt="">
                        </section>
                        <section class="description_right">
                            <h4 class="description_title ellipsis">{{shopDetailData.name}}</h4>
                            <p class="description_text">商家配送／{{shopDetailData.order_lead_time}}分钟送达／配送费¥{{shopDetailData.float_delivery_fee}}</p>
                            <p class="description_promotion ellipsis">公告：{{promotionInfo}}</p>
                        </section>
                        <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version="1.1" class="description_arrow" >
                            <path d="M0 0 L8 7 L0 14"  stroke="#fff" stroke-width="1" fill="none"/>
                        </svg>
                    </router-link>
                    <footer class="description_footer" v-if="shopDetailData.activities.length">
                        <p class="ellipsis">
                            <span class="tip_icon" :style="{'background':'#'+shopDetailData.activities[0].icon_color}">
                                {{shopDetailData.activities[0].icon_name}}
                            </span>
                            <span>
                                {{shopDetailData.activities[0].description}} (App专享)
                            </span>
                        </p>
                        <p>{{shopDetailData.activities.length}}个活动</p>
                        <svg class="footer_arrow">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-left"></use>
                        </svg>
                    </footer>
                </section>
            </header>
            <section class="change_show_type">
                <div><span :class='{activity_show: changeShowType =="food"}' @click="changeShowType='food'">商品</span></div>
                <div><span :class='{activity_show: changeShowType =="rating"}' @click="changeShowType='rating'">评价</span></div>
            </section>
            <transition>
                <ShopMenu :menuList="menuList" 
                    :shopId="shopId" 
                    @cart="calcuteCart"
                    @showMoveDot="showMoveDotFn"></ShopMenu>
            </transition>
            <ShoppingCart :shopId="shopId" 
                :geohash="geohash" 
                :cart="cart"
                :deliveryFee="shopDetailData.float_delivery_fee"
                :minOrderAmount="shopDetailData.float_minimum_order_amount"
                :inCart="receiveInCart"
                @changeInCart="changeInCart"></ShoppingCart>
        </section>
        <!-- <transition
                :appear="true"
                @before-appear="beforeEnter"
                @after-appear="afterEnter"
                v-for="item in dotList" :key="item.id">
            <span class="move_dot" >
                <svg class="move_liner" v-if="item.tag">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
                </svg>
            </span>
        </transition> -->
        <transition-group tag="ul" @before-enter="beforeEnter" @after-enter="afterEnter">
            <li class="move_dot" v-for="item in dotList" :key="item.id" >
                <svg class="move_liner">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
                </svg>
            </li>
        </transition-group>

        <!-- 路由 -->
        <transition name="route-side">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import ShopMenu from './components/ShopMenu'
import ShoppingCart from './components/ShoppingCart'
import {msiteAddress, shopDetails ,foodMenu ,getRatingList ,ratingScores, ratingTags } from '@src/api/getData';
import {imgBasePath} from '@src/utils/config'
import {getImgPathMixin} from '@src/utils/mixin'
export default {
    components:{
        ShopMenu,
        ShoppingCart
    },
    mixins:[getImgPathMixin],
    data(){
        return {
            windowHeight:0,
            shopLoadingImg:require('../../assets/imgs/shop_back_svg.svg').default,
            showLoading:true, //显示加载动画
            changeShowType: 'food', //切换显示商品或者评价
            shopDetailData:null, // 商铺详情
            menuList: null, //菜单列表
            ratingList:null, // 评论列表
            ratingOffset: 0, //评价获取数据offset值
            imgBasePath,
            cart:{
                totalPrice:0,
                cartList:[]
            }, // 购物车
            showdotList:[], // 动画点，列表
            elLeft:0,
            elBottom:0,
            receiveInCart:false , //动画点是否到了购物车。
        }
    },
    computed:{
        ...mapState(['latitude','longitude','geohash','shopId']),
        promotionInfo: function (){
            return this.shopDetailData.promotion_info || '欢迎光临，用餐高峰期请提前下单，谢谢。'
        },
        dotList(){
            return this.showdotList.filter(item=>{
                return item.tag
            })
        }
    },
    created(){
        let shopId = this.$route.query.id;
        if(shopId){
            this.saveShopId(shopId+'').then(()=>{
                console.log('save shopid succ')
                // 初始化购物车, 本地如果存在，放在state里面
                this.getShopCart();
            });
        }else{

        }
        
    },
    mounted(){
        this.initData();
        this.windowHeight = window.innerHeight;
    },
    methods:{
        ...mapActions(['saveLoaction','saveShopId','saveShopDetail','getShopCart']),
        async initData(){
            if(!this.latitude){
                let res =  await msiteAddress(this.geohash);
                this.saveLoaction(res);
            }
            // 店铺详情
            this.shopDetailData = await shopDetails(this.shopId,this.latitude,this.longitude);
            // 菜单列表
            this.menuList = await foodMenu(this.shopId);
            // 评论列表
            this.ratingList = await getRatingList(this.shopId, this.ratingOffset);
            // 商铺分数
            this.ratingScoresData = await ratingScores(this.shopId);
            //评论Tag列表
            this.ratingTagsList = await ratingTags(this.shopId);

            // save in vuex
            this.saveShopDetail(this.shopDetailData);
            this.showLoading=false;
        },
        calcuteCart(c){
            this.cart=c
        },
        showMoveDotFn(el){
            this.showdotList.push({tag:true,id:Date.now()})
            this.elLeft=el.left;
            this.elBottom=el.bottom;
        },
        beforeEnter(el){
            el.style.transform = `translateY(${37+  this.elBottom - this.windowHeight}px)`;
            el.children[0].style.transform = `translateX(${this.elLeft - 30}px)`;
        },
        afterEnter(el){
            el.style.transform = `translateY(0px)`;
            el.children[0].style.transform = `translateX(0px)`;
            el.style.transition = 'transform .55s cubic-bezier(0.3, -0.25, 0.7, -0.15)';
            el.children[0].style.transition = 'transform .55s linear';
            // 动画结束。修改dot
            this.showdotList=this.showdotList.map((item)=>{
                item.tag=false;
                return item;
            })
            // transition 动画结束监听
            el.children[0].addEventListener('transitionend', (item)=>{
                this.listenInCart();
            });
            // el.children[0].addEventListener('webkitAnimationEnd', (item)=>{
            //     this.listenInCart();
            // });
        },
        listenInCart(tag){
            if(tag){
                this.receiveInCart=tag;
            }else if(!this.receiveInCart){
                this.receiveInCart=true;
            }
        },
        changeInCart(){
            this.receiveInCart=false;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';

.shop_back_svg_container{
    position: fixed;
    top:0;
    @include wh(100%,100%);
    img{
        @include wh(100%,100%);
    }
}
.shop_container{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 1.95rem;
    @include wh(100%,100%);
    box-sizing: border-box;
    .nav_header{
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 1.95rem;
        background: $blue;
        line-height: 1.95rem;
        z-index: 12;
        .back_svg{
            @include ct;
            @include wh(1rem,40%);
            margin-left: 0.5rem;
        }
        span{
            @include center;
            @include sc(0.8rem,#fff);
            font-weight: 500;
        }
    }
    .shop_detail_header{
        overflow: hidden;
        position: relative;
        .header_cover_img_con{
            position: absolute;
            width: 100%;
            height: 100%;
            
            .header_cover_img{
                width: 100%;
                top: 0;
                left: 0;
                z-index: 9;
                filter: blur(10px)
            }
        }
        .description_header{
            z-index: 10;
            position: relative;
            background-color: rgba(119,103,137,.43);
            padding: 0.4rem 0 0.4rem 0.4rem;
            width: 100%;
            .description_top{
                display: flex;
                position: relative;
                .description_left{
                    margin-right: 0.3rem;
                    img{
                        @include wh(2.9rem,2.9rem);
                        border-radius: 0.15rem;
                    }
                }
                .description_right{
                    .description_title{
                        @include sc(0.8rem,#fff);
                        font-weight: 700;
                        margin-bottom: 0.2rem;
                    }
                    .description_text{
                        @include sc(0.55rem,#fff);
                        margin-bottom: 0.2rem;
                    }
                    .description_promotion{
                        @include sc(0.55rem,#fff);
                    }
                }
                .description_arrow{
                    @include ct;
                    right: 0.3rem;
                    z-index: 11;
                }
            }
            .description_footer{
                position: relative;
                display:flex;
                margin-top: 0.4rem;
                padding-right: 1rem;
                p{
                    @include sc(0.5rem,#fff);
                    span{
                        @include sc(0.5rem,#fff);
                    }
                    .tip_icon{
                        display: inline-block;
                        padding: 0 0.0625rem;
                        border-radius: 0.1rem;
                        font-size: .4rem;
                    }
                }
                .footer_arrow{
                    @include ct;
                    right:0.5rem;
                    @include wh(0.4rem,0.4rem);
                }
            }
        }
    }
    .change_show_type{
        display: flex;
        background: #fff;
        border-bottom: 1px solid #ebebeb;
        div{
            flex: 1;
            display: flex;;
            align-items: center;
            justify-content: center;
            padding: 0.2rem 0 0.3rem;
            span{
                padding: 0.2rem 0;
                @include sc(0.7rem,#666);
                border-bottom: 0.12rem solid transparent;
                &.activity_show{
                    border-color: $blue;
                    color: $blue;
                }
            }
        }
    } 
}
.move_dot{
    position: fixed;
    bottom: 30px;
    left: 30px;
    .move_liner{
        @include wh(.9rem, .9rem);
        fill: #3190e8;
    }
}
.route-side-enter,.route-side-leave-to{
    transform: translateX(100%);
    opacity: 0.2;
}
.route-side-enter-active,.route-side-leave-active{
    transition: all 0.3s ease-out;
}
</style>